<template>
  <div style="display: flex; align-items:center" class="header">
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo flex"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      @select="handleSelect"
    >
      <el-menu-item v-for="(menu) in menuList" :index="menu.routerUrl"></el-menu-item>
    </el-menu>
    <el-dropdown trigger="click" class="downList">
      <span class="el-dropdown-link">
        {{ userName }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import {
  ArrowDown,
  Menu as IconMenu,
} from '@element-plus/icons-vue'

export default defineComponent({
  components: {
    ArrowDown
  },
  setup() {
    const menuList = [
      //   {
      //   routerUrl: '/blockDiagramList',
      //   routerName: '框图',
      //   sidebarList: [{
      //     routerUrl: '/blockDiagram',
      //     routerName: '框图展示',
      //   }]
      // },
      {
        routerUrl: '/addProgress',
        routerName: '二级进度表',
        sidebarList: [{
          routerUrl: '/addProgress',
          routerName: '分部/分项名称维护',
        }, {
          routerUrl: '/scheduleTemplateMaintenanceList',
          routerName: '进度模版维护列表',
        }, {
          routerUrl: '/scheduleTemplateMaintenance',
          routerName: '进度模版维护',
        }]
      }]
    const activeIndex2 = ref('/blockDiagramList')
    const userName = localStorage.getItem('userName')
    return {
      menuList,
      activeIndex2,
      userName,
    }
  },
  methods: {
    loginOut() {
      this.$cookies.remove('Authorization')
      this.$router.push({ path: '/login' })
    },
    handleSelect(key, keyPath) {
      sessionStorage.setItem('selectMenu', key)
      sessionStorage.setItem('menuList', JSON.stringify(this.menuList))
      this.$emit('selectMenu', key)
    }
  },
})
</script>

<style>
.header {
  flex: 1;
  background: #545c64;
}
.flex {
  flex: 1;
}
.el-menu--horizontal {
  border-color: #545c64;
}
.downList {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  background: #545c64;
  color: #fff;
  padding-right: 1rem;
}
</style>